<template>
	<diaLogComp
		:show="show"
		title="添加用户"
		width="550px"
		@closed="emit('closed')">
		<el-form
			:model="user_info"
			:rules="rules"
			ref="form_comp"
			label-width="auto">
			<el-form-item label="头像">
				<div
					class="add_avatar"
					@click="uploadAvatar">
					<img
						v-if="user_info.headImg"
						:src="user_info.headImg" />
				</div>
			</el-form-item>

			<el-form-item
				label="账号"
				prop="username">
				<el-input v-model="user_info.username" />
			</el-form-item>
			<el-form-item
				label="姓名"
				prop="name">
				<el-input v-model="user_info.name" />
			</el-form-item>
			<el-form-item
				label="手机号"
				prop="phone">
				<el-input v-model="user_info.phone" />
			</el-form-item>
		</el-form>
		<div class="bottom_btn">
			<el-button @click="close">取消</el-button>
			<el-button
				@click="create"
				type="primary">
				创建
			</el-button>
		</div>
	</diaLogComp>
</template>

<script setup lang="ts">
import { ref, onMounted, useTemplateRef } from "vue";
import api from "@/api";
import diaLogComp from "@/components/dialog/index.vue";
import { ElMessage } from "element-plus";
import { validatePhoneNumber, uploadFile } from "@/utils/public";

interface Props {
	user: any;
}
const props = defineProps<Props>();
const emit = defineEmits(["closed"]);

const show = ref(false);
onMounted(() => {
	show.value = true;
});

// 用户信息
const user_info = ref<{
	headImg?: string;
	username: string;
	name: string;
	phone: string;
}>({} as any);

// 验证规则
const form_comp = useTemplateRef("form_comp");
const rules = {
	username: [{ required: true, message: "登录账号必填", trigger: "blur" }],
	name: [{ required: true, message: "姓名必填", trigger: "blur" }],
	phone: [
		{
			required: true,
			validator: (rule: any, value: any, callback: any) => {
				if (rule.required && value === "") {
					callback("手机号不能为空");
				} else if (!validatePhoneNumber(value)) {
					callback("手机号格式不正确");
				} else {
					callback();
				}
			},
			trigger: "blur",
		},
	],
};

// 上传头像
const uploadAvatar = async () => {
	uploadFile({
		onConfirm: (url: string) => {
			user_info.value.headImg = url;
		},
	});
};

// 取消
const close = () => {
	user_info.value = {} as any;
	show.value = false;
};

// 创建
const create = async () => {
	await form_comp.value!.validate();

	if (props.user.id) {
		const msg = await api.user.updateUser({
			...user_info.value,
			userId: props.user.id,
		});
		if (msg.code == 1000) {
			ElMessage.success("修改成功");
		}
	} else {
		const msg = await api.user.createUser(user_info.value);
		if (msg.code == 1000) {
			ElMessage.success("创建成功");
		}
	}
	close();
};

const init = () => {
	user_info.value = {
		username: props.user.username,
		name: props.user.name,
		phone: props.user.phone,
		headImg: props.user.headImg,
	};
};
init();
</script>

<style lang="less" scoped>
.add_avatar {
	width: 100px;
	height: 100px;
	border-radius: var(--radius-base);
	cursor: pointer;
	box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
		inset;
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
</style>
